---
type: tutorial
title: Combiner les mises en page pour obtenir le meilleur des deux mondes
description: |-
  Tutoriel : Créer votre premier blog avec Astro —
  Ajoutez votre mise en page de base à la mise en page qui formate vos articles de blog
i18nReady: true
---
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Maintenant que vous avez ajouté une mise en page à chaque article de blog, il est temps de faire en sorte que vos articles ressemblent au reste des pages de votre site web !

<PreCheck>
  - Imbriquer votre mise en page d'article de blog dans votre mise en page principale
</PreCheck>

## Imbriquer vos deux mises en page

Vous avez déjà une mise en page `BaseLayout.astro` pour définir la mise en page générale de vos pages.

`MarkdownPostLayout.astro` vous offre des modèles supplémentaires pour les propriétés courantes des articles de blog, telles que `title` et `date`, mais vos articles de blog ne ressemblent pas aux autres pages de votre site. Vous pouvez assortir l'apparence de vos articles de blog au reste de votre site en **imbriquant des mises en page**.

<Steps>
1. Dans `src/layouts/MarkdownPostLayout.astro`, importez `BaseLayout.astro` et utilisez-le pour envelopper l'ensemble du contenu du modèle. N'oubliez pas de passer la propriété `pageTitle` :

    ```astro title="src/layouts/MarkdownPostLayout.astro" ins={2,5,13}
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <meta charset="utf-8" />
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Écrit par : {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

2. Dans `src/layouts/MarkdownPostLayout.astro`, vous pouvez maintenant supprimer la balise `meta` car elle est déjà incluse dans votre `BaseLayout` :

    ```astro title="src/layouts/MarkdownPostLayout.astro" del={6}
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <meta charset="utf-8" />
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Écrit par : {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

3. Vérifiez l'aperçu dans votre navigateur à l'adresse `http://localhost:4321/posts/post-1`. Vous devriez maintenant voir le contenu rendu par :

    - Votre **mise en page principale**, y compris vos styles, vos liens de navigation et votre pied de page social.
    - Votre **mise en page d'article de blog**, y compris les propriétés du frontmatter telles que la description, la date, le titre et l'image.
    - Votre **contenu Markdown individuel d'article de blog**, comprenant uniquement le texte écrit dans cet article.

4. Remarquez que votre titre de page est maintenant affiché deux fois, une fois par chaque mise en page.

    Supprimez la ligne qui affiche votre titre de page dans `MarkdownPostLayout.astro` :

    ```astro title="src/layouts/MarkdownPostLayout.astro" del={2}
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Écrit par : {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

5. Vérifiez à nouveau l'aperçu dans votre navigateur à `http://localhost:4321/posts/post-1` et assurez-vous que cette ligne n'est plus affichée et que votre titre n'est affiché qu'une seule fois. Apportez les ajustements nécessaires pour vous assurer de ne pas avoir de contenu en double.
</Steps>


  Assurez-vous que :

    - Chaque article de blog affiche le même modèle de page, et aucun contenu ne manque. (Si un contenu est absent dans l'un de vos articles de blog, vérifiez ses propriétés de frontmatter.)

    - Aucun contenu n'est dupliqué sur une page. (Si quelque chose est affiché deux fois, assurez-vous de le supprimer de `MarkdownPostLayout.astro`.)

    Si vous souhaitez personnaliser votre modèle de page, vous pouvez.



<Box icon="question-mark">

### Tester vos connaissances

1. Cela vous permet d'imbriquer une mise en page à l'intérieur d'une autre et de profiter de travailler avec des éléments modulaires.

    <MultipleChoice>
      <Option>
        déploiement continu
      </Option>
      <Option>
        conception réactive
      </Option>
      <Option isCorrect>
        conception basée sur des composants
      </Option>
    </MultipleChoice>

2. Les mises en page multiples sont particulièrement utiles pour les projets contenant des pages Markdown, comme un...

    <MultipleChoice>
      <Option isCorrect>
        blog
      </Option>
      <Option>
        tableau de bord
      </Option>
      <Option>
        application de chat
      </Option>
    </MultipleChoice>

3. Lequel de ces éléments fournit un modèle pour l'ensemble de vos pages ?

    <MultipleChoice>
      <Option>
        `index.astro`
      </Option>
      <Option isCorrect>
        `BaseLayout.astro`
      </Option>
      <Option>
        `post-1.md`
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## Liste de contrôle

<Checklist>
- [ ] Je peux imbriquer des mises en page en vérifiant s'il y a des éléments dupliqués.
</Checklist>
</Box>

### Ressources

- [Imbrication de mises en page dans Astro](/fr/basics/layouts/#imbrication-de-mises-en-page)
